@import '@bifrostui/styles/mixins/index.less';
@class-prefix-time-picker: ~'bui-d-time-picker';

@{root-selector} {
  --bui-d-time-picker-height: var(--bui-input-height, 32px);
  --bui-d-time-picker-min-width: var(--bui-input-min-width, 100px);
  --bui-d-time-picker-font-size: var(--bui-title-size-3, 16px);
  --bui-d-time-picker-icon-size: var(--bui-title-size-3, 16px);
  --bui-d-time-picker-container-padding: var(--bui-spacing-md, 9px);
  --bui-d-time-picker-bg: var(--bui-color-bg-view);
  --bui-d-time-picker-font-family: var(--bui-font-family);
  --bui-d-time-picker-border: 1px solid var(--bui-color-border-default);
  --bui-d-time-picker-border-invalid: 1px solid var(--bui-color-danger);
  --bui-d-time-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
  --bui-d-time-picker-disabled-color: var(--bui-color-fg-subtle);
  --bui-d-time-picker-container-main-radius: 3px;
  --bui-d-time-picker-container-li-padding: 8px;
  --bui-d-time-picker-container-li-height: 24px;
  --bui-d-time-picker-container-li-line-height: 24px;
  --bui-d-time-picker-container-li-width: 24px;
  --bui-d-time-picker-container-li-radius: var(--bui-shape-radius-default, 6px);
  --bui-d-time-picker-container-li-font-size: var(--bui-title-size-4);
  --bui-d-time-picker-container-li-color: var(--bui-color-fg-default);
  --bui-d-time-picker-container-li-color-active: var(--bui-color-fg-default);
  --bui-d-time-picker-container-li-bg-active: #ffc7da;
}

.@{class-prefix-time-picker} {
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  height: var(--bui-d-time-picker-height);
  min-width: var(--bui-d-time-picker-min-width);
  font-size: var(--bui-d-time-picker-font-size);
  border-radius: 5px;
  background-color: var(--bui-d-time-picker-bg);
  font-family: var(--bui-d-time-picker-font-family);
  border: var(--bui-d-time-picker-border);

  &:active,
  &-active {
    box-shadow: var(--bui-d-time-picker-shadow);
  }

  &-invalid {
    border: var(--bui-d-time-picker-border-invalid);
  }

  &-icon {
    display: flex;
    align-items: center;
    font-size: var(--bui-d-time-picker-icon-size);
  }

  &-container {
    display: flex;
    align-items: center;
    padding: 0 var(--bui-d-time-picker-container-padding);
    height: 100%;
  }

  &-placeholder {
    color: var(--bui-color-fg-disabled);
  }

  &-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    height: 100%;
    background-color: transparent;
    outline: none;
    border: 0;
  }

  &-container-top {
    bottom: 100%;
    margin-bottom: 6px;
  }

  &-container-bottom {
    top: 100%;
    margin-top: 6px;
  }

  &-main {
    border-radius: var(--bui-d-time-picker-container-main-radius);
    padding: 3px 0;
    height: 308px;
    overflow: hidden;
  }

  &-table {
    height: 100%;
    overflow: hidden;
    display: flex;
  }

  &-hour,
  &-minute,
  &-second,
  &-meridiem {
    &-ul {
      padding: 0;
      border-radius: 0;
      text-align: center;
      border: none;
      border-right: 1px solid var(--bui-color-border-default);
      overflow-y: auto;
      list-style: none;
      scrollbar-width: thin; /* Firefox */
      scrollbar-color: #888 transparent; /* Firefox */
    }

    &-li {
      box-sizing: content-box;
      width: var(--bui-d-time-picker-container-li-width);
      height: var(--bui-d-time-picker-container-li-height);
      line-height: var(--bui-d-time-picker-container-li-line-height);
      padding: var(--bui-d-time-picker-container-li-padding);
      margin: 0 4px;
      border-radius: var(--bui-d-time-picker-container-li-radius);
      font-size: var(--bui-d-time-picker-container-li-font-size);
      font-family: var(--bui-d-time-picker-lay-font-family);
      color: var(--bui-d-time-picker-container-li-color);
      font-weight: var(--bui-font-weight-medium);
      cursor: pointer;
    }

    &:last-child {
      border-right: none;
    }

    &-li:hover {
      background-color: var(--bui-color-bg-default);
    }

    &-active {
      color: var(--bui-d-time-picker-container-li-color-active);
      background-color: var(--bui-d-time-picker-container-li-bg-active);
    }

    &-disabled {
      opacity: 0.38;
    }

    & &-disabled:hover {
      opacity: 0.38;
      cursor: default;
    }
  }
}

.@{class-prefix-time-picker}.@{class-prefix-time-picker}-disabled {
  pointer-events: none;
  box-shadow: none;
  background-color: rgba(188, 188, 188, 0.2);

  & input {
    color: var(--bui-d-time-picker-disabled-color);
  }
}
